<!doctype html>
<html lang="zh" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>20种炫酷的菜单线条动画特效UI设计效果|DEMO</title>	
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="container">
		<header class="htmleaf-header">
			<h1>20种炫酷的菜单线条动画特效UI设计效果 <span>A set of Inspiration for Line Menu Styles</span></h1>
		</header>
		<section class="section section--menu" id="Sebastian">
			<h2 class="section__title">Sebastian</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--sebastian">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">News</a></li>
					<li class="menu__item"><a class="menu__link">Support</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Prospero">
			<h2 class="section__title">Prospero</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--prospero">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Welcome</a></li>
					<li class="menu__item"><a class="menu__link">About</a></li>
					<li class="menu__item"><a class="menu__link">Solutions</a></li>
					<li class="menu__item"><a class="menu__link">Blog</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Viola">
			<h2 class="section__title">Viola</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--viola">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Articles</a></li>
					<li class="menu__item"><a class="menu__link">Reviews</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Antonio">
			<h2 class="section__title">Antonio</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--antonio">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Blog</a></li>
					<li class="menu__item"><a class="menu__link">About</a></li>
					<li class="menu__item"><a class="menu__link">Support</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Miranda">
			<h2 class="section__title">Miranda</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--miranda">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Start</a></li>
					<li class="menu__item"><a class="menu__link">Deals</a></li>
					<li class="menu__item"><a class="menu__link">Special Offers</a></li>
					<li class="menu__item"><a class="menu__link">News</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
			<p class="info">Inspired by the menu seen on <a href="http://spg.se/">spg.se</a></p>
		</section>
		<section class="section section--menu" id="Ariel">
			<h2 class="section__title">Ariel</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--ariel">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">Story</a></li>
					<li class="menu__item"><a class="menu__link">Blog</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Caliban">
			<h2 class="section__title">Caliban</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--caliban">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">News</a></li>
					<li class="menu__item"><a class="menu__link">About</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Ferdinand">
			<h2 class="section__title">Ferdinand</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--ferdinand">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Who we are</a></li>
					<li class="menu__item"><a class="menu__link">What we offer</a></li>
					<li class="menu__item"><a class="menu__link">Our news</a></li>
					<li class="menu__item"><a class="menu__link">Contact us</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Adrian">
			<h2 class="section__title">Adrian</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--adrian">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link"><span class="menu__helper">Home</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Recipes</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Health</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Shop</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Contact</span></a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Francisco">
			<h2 class="section__title">Francisco</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--francisco">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link"><span class="menu__helper">Home</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Shop</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">News</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Projects</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Contact</span></a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Trinculo">
			<h2 class="section__title">Trinculo</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--trinculo">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link"><span class="menu__helper">Home</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">About</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Stories</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Shop</span></a></li>
					<li class="menu__item"><a class="menu__link"><span class="menu__helper">Register</span></a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Stephano">
			<h2 class="section__title">Stephano</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--stephano">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">News</a></li>
					<li class="menu__item"><a class="menu__link">Support</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Iris">
			<h2 class="section__title">Iris</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--iris">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">News</a></li>
					<li class="menu__item"><a class="menu__link">Support</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Ceres">
			<h2 class="section__title">Ceres</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--ceres">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Gallery</a></li>
					<li class="menu__item"><a class="menu__link">Clients</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Juno">
			<h2 class="section__title">Juno</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--juno">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Who we are</a></li>
					<li class="menu__item"><a class="menu__link">What we offer</a></li>
					<li class="menu__item"><a class="menu__link">Our news</a></li>
					<li class="menu__item"><a class="menu__link">Contact us</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Maria">
			<h2 class="section__title">Maria</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--maria">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">News</a></li>
					<li class="menu__item"><a class="menu__link">Support</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Valentine">
			<h2 class="section__title">Valentine</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--valentine">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">Reviews</a></li>
					<li class="menu__item"><a class="menu__link">News</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
		</section>
		<section class="section section--menu" id="Puck">
			<h2 class="section__title">Puck</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--puck">
				<ul class="menu__list">
					<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
					<li class="menu__item"><a class="menu__link">Shop</a></li>
					<li class="menu__item"><a class="menu__link">Reviews</a></li>
					<li class="menu__item"><a class="menu__link">News</a></li>
					<li class="menu__item"><a class="menu__link">Contact</a></li>
				</ul>
			</nav>
			<p class="info">Style created by <a href="http://edensg.me">Eden S.-G.</a></p>
		</section>
		<section class="section section--menu" id="Titania">
			<h2 class="section__title">Titania</h2>
			<span class="link-copy"></span>
			<nav class="menu menu--titania">
				<ul class="menu__list">
						<li class="menu__item menu__item--current"><a class="menu__link">Home</a></li>
						<li class="menu__item"><a class="menu__link">Portfolio</a></li>
						<li class="menu__item"><a class="menu__link">Blog</a></li>
						<li class="menu__item"><a class="menu__link">Shop</a></li>
						<li class="menu__item"><a class="menu__link">Contact</a></li>
						<li class="menu__lines"></li>
				</ul>
			</nav>
			<p class="info">Style created by <a href="https://twitter.com/rileyjshaw">rileyjshaw</a></p>
	</section>
	</div><!-- /container -->
	
	<script src="js/classie.js"></script>
	<script src="js/clipboard.min.js"></script>
	<script>
		(function() {
			[].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
				var menuItems = menu.querySelectorAll('.menu__link'),
					setCurrent = function(ev) {
						ev.preventDefault();

						var item = ev.target.parentNode; // li

						// return if already current
						if( classie.has(item, 'menu__item--current') ) {
							return false;
						}
						// remove current
						classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
						// set current
						classie.add(item, 'menu__item--current');
					};

				[].slice.call(menuItems).forEach(function(el) {
					el.addEventListener('click', setCurrent);
				});
			});

			[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
				link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
				new Clipboard(link);
				link.addEventListener('click', function() {
					classie.add(link, 'link-copy--animate');
					setTimeout(function() {
						classie.remove(link, 'link-copy--animate');
					}, 300);
				});
			});
		})(window);
	</script>
</body>
</html>